<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>文档标题</title>
	<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		#svg {
			background: #fff;
		}
		body {
			background: #000;
		}
	</style>
</head>
<body>
	<svg id="svg" width="600" height="500">
		<line x1="100" y1="100" x2="300" y2="300" id="line" style="stroke:red;stroke-width:20"></line>
	</svg>
	<script>
		let line = document.querySelector('#line');
		let start = +line.getAttribute('x1');
		let end = 300;
		let speed = 100;
		let dis = end - start;
		let count = 0;

		line.addEventListener('mouseenter', function(e) {
		  	next();
		});

		function next() {
			count++;
			let a = 1 - (count / speed);
			line.setAttribute('x1', start + dis * (1 - a * a * a));
			if (count < speed) {
				requestAnimationFrame(next);
			}
		}
	</script>
</body>
</html>